<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <div style="display: flex;width: 100%;justify-content: space-between;">
            <div id="title">
              <img src="../assets/images/logo.png" alt="">
              <span>BIG CUTE</span>
            </div>
            <div class="content">
              <div style="width: 50px;">
                <el-icon>
                  <Fold />
                </el-icon>
              </div>
              <div style="width: 800px;font-size: 20px;" >
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item style="font-size: 20px;" :to="{ path: '/' }">manager</el-breadcrumb-item>
                  <el-breadcrumb-item style="font-size: 20px;" v-for="(item,index) in mianData" :key="index">
                     <!-- 根据 item.href 生成链接，并显示 item.name 作为链接文本 -->
                    <a :href="item.href">{{ item.name }}</a>
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </div>
            <div class="icon">
              <p><el-icon size="30">
                  <Search />
                </el-icon></p>
              <p><el-icon size="30" @click="loadPage">
                  <Refresh />
                </el-icon></p>
              <p><el-icon size="30">
                  <Bell />
                </el-icon></p>
              <p  ><el-icon size="30" @click="toBigZoom">
                  <FullScreen />
                </el-icon></p>
              <p><img :src="users.img" alt=""></p>
              <p class="p1">
                <span ref="buttonRef" v-click-outside="onClickOutside" style="cursor: pointer;"> {{ users.username }}</span>
                <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="退出" virtual-triggering>
                  <span> 你确定要退出登录吗？ </span>
                  <div style="display: flex;">
                    <el-button size="small" type="primary" @click="exit">确定</el-button>
                    <el-button size="small" @click="onClickOutside">取消</el-button>
                  </div>

                </el-popover>
              </p>
              <p class="p2"><el-icon size="30">
                  <Setting />
                </el-icon></p>
            </div>
          </div>

        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-row class="tac">
              <el-col :span="12">
                <el-menu :router="true" default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                  @close="handleClose">
                  <div v-for="(item, index) in routes" :key="item.index">
                    <el-sub-menu :index="index + ''">
                      <template #title>
                        <router-link :to="item.path">
                          <el-icon v-if="index === 0">
                            <HomeFilled />
                          </el-icon>
                          <el-icon v-if="index === 1">
                            <UserFilled />
                          </el-icon>
                          <el-icon v-if="index === 2">
                            <UserFilled />
                          </el-icon>
                          <el-icon v-if="index === 3">
                            <Checked />
                          </el-icon>
                          <el-icon v-if="index === 4">
                            <Histogram />
                          </el-icon>
                          <el-icon v-if="index === 5">
                            <HelpFilled />
                          </el-icon>
                          <el-icon v-if="index === 6">
                            <UserFilled />
                          </el-icon>
                          <el-icon v-if="index === 7">
                            <BrushFilled />
                          </el-icon>
                          <span style="font-size: 20px;" @click="mian(item,index)">{{ item.name }}</span>
                        </router-link>
                      </template>
                      <el-menu-item v-for="(j, i) in item.children" :key="i.id" :route="{ path: j.path }" :index="j.id">
                        <el-icon>
                          <Menu></Menu>
                        </el-icon>
                        <span style="font-size: 20px;" @click="mian(j,i)">{{ j.name }}</span>
                      </el-menu-item>
                    </el-sub-menu>
                  </div>

                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <el-main style="background-color: #f0f2f5;padding: 30px;width: 100%;height: 1000px;">
            <div class="tou">
              <el-button>首页</el-button>
              <el-button type="primary">就业态势</el-button>
            </div>
            <div>
              <router-view></router-view>
            </div>

          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import router, { routes } from '@/router/index';
import { defineComponent, onMounted, onUnmounted, ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'

import {
  Bell,
  BrushFilled,
  Checked,
  Fold,
  FullScreen,
  HelpFilled,
  Histogram,
  HomeFilled,
  Menu,
  Refresh,
  Search,
  Setting,
  UserFilled,
} from '@element-plus/icons-vue'
let users = JSON.parse(localStorage.getItem('users') as string)
let datas = localStorage.getItem('token')
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
// 退出
const exit=()=>{
  localStorage.removeItem('token')
  localStorage.removeItem('users')
  router.push('/login')
}

// 面包屑 
const mianData=ref([
  {
    name:'首页',
    href:'/manage/homepage'
  }
])
const mian=(val:any,index:number)=>{
  let flag=mianData.value.find(item=>item.name===val.name)
  if(!flag){
    mianData.value.push({
      name:val.name,
      href:val.path
    })
  }
}
// 放大
const isFullZoom=ref(false) //一个标志变量，用于记录是否处于全屏模式
const toBigZoom=()=>{
  if(!isFullZoom.value){
     enterFullscreen();
  }else{
  exitFullscreen();
  }
}
// 进入全屏模式
const enterFullscreen = () => {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullZoom) { // Firefox
    element.mozRequestFullZoom();
  } else if (element.webkitRequestFullZoom) { // Chrome, Safari and Opera
    element.webkitRequestFullZoom();
  } else if (element.msRequestFullZoom) { // IE/Edge
    element.msRequestFullZoom();
  }
  isFullZoom.value = true;
};
// 退出全屏模式
const exitFullscreen = () => {
  if (document.exitFullZoom) {
    document.exitFullZoom();
  } else if (document.mozCancelFullZoom) { // Firefox 特有的全屏方法。
    document.mozCancelFullZoom();
  } else if (document.webkitExitFullZoom) { // Chrome、Safari 和 Opera 使用的全屏方法
    document.webkitExitFullZoom();
  } else if (document.msExitFullZoom) { // Internet Explorer 和 Edge 的全屏方法
    document.msExitFullZoom();
  }
  isFullZoom.value = false;
};
// 点击按钮时调用 toggleFullscreen 方法来切换全屏状态。
const handleEscKey = (event: KeyboardEvent) => {
  if (event.key === 'Escape' && isFullscreen.value) {
    exitFullscreen();
  }
};
// 使用 onMounted 和 onUnmounted 生命周期钩子来管理事件监听器
onMounted(() => {
  window.addEventListener('keydown', handleEscKey);
});

onUnmounted(() => {
  window.removeEventListener('keydown', handleEscKey);
});
// 刷新 
const loadPage=()=>{
  window.location.reload()
}
</script>

<style scoped lang="scss">
.el-button+.el-button {
  margin-left: 8px;
}

.common-layout {
  width: 95%;
  height: 100%;
}

.icon {
  width: 25%;
  height: 80px;
  display: flex;

  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  p {
    width: 50px;
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
  }

  .p1 {
    width: 80px;
    margin-left: 20px;
  }

  .p2 {
    margin-right: 50px;

  }


}

.content {
  width: 80%;
  height: 60px;
  display: flex;
  align-items: center;

  .el-icon {
    font-size: 25px;
    margin-top: 20px;
    cursor: pointer;
  }
}

.tou {
  width: 100%;
  height: 32px;
  background-color: #fff;
  margin-bottom: 20px;
}

.tac {
  width: 380px;
}

#title {
  width: 13%;
  height: 60px;
  line-height: 70px;

  img {
    width: 70px;
    height: 50px;
  }

  span {
    font-weight: bold;
    font-size: 22px;
    display: inline-block;
    line-height: 40px;
    margin-left: 20px;
    padding-top: 10px;
  }
}
.zoom-container {
  transition: transform 0.3s;
}
.zoomed {
  transform: scale(1.5);
}
</style>
